<!-- 手机模拟器 -->
<template>
    <div id="mobilePhoneSimulator" v-if="useData().frontmatter.value?.demoShow">
        <iframe class="demo-iframe" :src="useData().frontmatter.value?.demoLink" scrolling="auto" frameborder="0"></iframe>
    </div>
</template>

<script setup>
    import { useData } from 'vitepress'

    console.log(useData())
</script>

<style lang="scss" scoped>
    #mobilePhoneSimulator {
        width: 375px;
        height: 812px;
        overflow: hidden;
        background-image: url("/images/iphone13.png");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 48px 15px 35px;
        margin-top: 10vh;
        order: 2;
        position: sticky;
        top: 150px;

        .demo-iframe {
            width: 100%;
            height: 100%;
            border-radius: 0 0 30px 30px;
        }
    }
</style>
